<template>
  <div>
    <div class="container">
      <div class="mycard">
        <el-row :gutter="20" class="mgb20">
          <el-col :span="4">
            <el-card shadow="hover" :body-style="{ padding: '0px' }" style="cursor: pointer">
              <div class="grid-content grid-con-1">
                <!-- <el-icon class="grid-con-icon"
                  ><i class="el-icon-collection-tag"></i
                ></el-icon> -->

                <div class="grid-cont-right">
                  <div class="grid-num">13</div>
                  <div><i class="el-icon-tickets"></i>待办事宜</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card shadow="hover" :body-style="{ padding: '0px' }" style="cursor: pointer">
              <div class="grid-content grid-con-2">
                <!-- <el-icon class="grid-con-icon"><ChatDotRound /></el-icon> -->
                <div class="grid-cont-right">
                  <div class="grid-num">321</div>
                  <div><i class="el-icon-s-comment"></i>系统消息</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card shadow="hover" :body-style="{ padding: '0px' }" style="cursor: pointer">
              <div class="grid-content grid-con-3">
                <!-- <el-icon class="grid-con-icon"><Goods /></el-icon> -->
                <div class="grid-cont-right">
                  <div class="grid-num">5</div>
                  <div><i class="el-icon-document"></i>待审核任务</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card shadow="hover" :body-style="{ padding: '0px' }" style="cursor: pointer">
              <div class="grid-content grid-con-3">
                <!-- <el-icon class="grid-con-icon"><Goods /></el-icon> -->
                <div class="grid-cont-right">
                  <div class="grid-num">5</div>
                  <div><i class="el-icon-document"></i>待办发文</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card shadow="hover" :body-style="{ padding: '0px' }" style="cursor: pointer">
              <div class="grid-content grid-con-3">
                <!-- <el-icon class="grid-con-icon"><Goods /></el-icon> -->
                <div class="grid-cont-right">
                  <div class="grid-num">8</div>
                  <div><i class="el-icon-document"></i>待办收文</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card shadow="hover" :body-style="{ padding: '0px' }" style="cursor: pointer">
              <div class="grid-content grid-con-3">
                <!-- <el-icon class="grid-con-icon"><Goods /></el-icon> -->
                <div class="grid-cont-right">
                  <div class="grid-num">0</div>
                  <div><i class="el-icon-document"></i>待办触发</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!-- <a-tabs default-active-key="1" @change="callback">
          <a-tab-pane key="1" tab="待办事宜">
            <a-empty />
          </a-tab-pane>
          <a-tab-pane key="2" tab="待接受任务" force-render>
            <a-empty />
          </a-tab-pane>
          <a-tab-pane key="3" tab="待审核任务">
            <a-empty />
          </a-tab-pane>
          <a-tab-pane key="4" tab="待办发文">
            <a-empty />
          </a-tab-pane>
          <a-tab-pane key="5" tab="待办收文">
            <a-empty />
          </a-tab-pane>
          <a-tab-pane key="6" tab="待办触发">
            <a-empty />
          </a-tab-pane>
        </a-tabs> -->
        <div class="dolist_center">
          <a-row style="display: flex">
            <a-col :span="12">
              <a-card title="待办事宜1">
                <a slot="extra" href="#">{{ nowTime.replace(/\//g, "-") }}</a>
              </a-card>
            </a-col>
            <a-col :span="12">
              <a-card title="待办事宜2">
                <a slot="extra" href="#">{{ nowTime.replace(/\//g, "-") }}</a>
              </a-card>
            </a-col>
          </a-row>
          <a-row style="display: flex">
            <a-col :span="12">
              <a-card title="待办事宜3">
                <a slot="extra" href="#">{{ nowTime.replace(/\//g, "-") }}</a>
              </a-card>
            </a-col>
            <a-col :span="12">
              <a-card title="待办事宜4">
                <a slot="extra" href="#">{{ nowTime.replace(/\//g, "-") }}</a>
              </a-card>
            </a-col>
          </a-row>
          <a-row style="display: flex">
            <a-col :span="12">
              <a-card title="待办事宜3">
                <a slot="extra" href="#">{{ nowTime.replace(/\//g, "-") }}</a>
              </a-card>
            </a-col>
            <a-col :span="12">
              <a-card title="待办事宜4">
                <a slot="extra" href="#">{{ nowTime.replace(/\//g, "-") }}</a>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </div>
      <div style="background: #fff">
        <a-card title="公告栏" :bordered="false" style="min-width: 300px">
          <a slot="extra" href="#">更多公告 <a-icon type="right" /></a>
          <a-list bordered :data-source="data">
            <a-list-item slot="renderItem" slot-scope="item" @click="clickalist(item)" class="a-list-sty"
              style="cursor: pointer">
              {{ item.title }}
              <div style="
                  display: flex;
                  display: inline-block;
                  float: right;
                  font-size: 12px;
                  color: #999999;
                ">
                2023-05-06
                <a-icon type="right" />
              </div>
            </a-list-item>
          </a-list>
        </a-card>
      </div>
    </div>

    <div class="container">
      <div class="mycard">
        <a-calendar size="mini">
          <ul slot="dateCellRender" slot-scope="value" class="events">
            <li v-for="item in getListData(value)" :key="item.content">
              <a-badge :status="item.type" :text="item.content" />
            </li>
          </ul>
          <template slot="monthCellRender" slot-scope="value">
            <div v-if="getMonthData(value)" class="notes-month">
              <section>{{ getMonthData(value) }}</section>
              <span>已完成事项</span>
            </div>
          </template>
        </a-calendar>

        <!-- <div id="app">
          <WSchedule :planList="timePeriodList" :isFirstDayOfMondayOrSunday="1" :hasNumExpend="1"
            @handleDetail="handleDetail" @handleCardDetail="handleCardDetail" @changeWeek="changeWeek"
            class="timeSchedule">
            <template v-slot:thing="{ row }">
              <span>时段：{{ row.timePeriod }}</span>
              <span>课程：{{ row.course }}</span>
              <span>值班员：{{ row.watchman }}</span>
              <span>地点：{{ row.place }}</span>
            </template>
          </WSchedule>
        </div> -->
      </div>

      <div>
        <a-carousel :after-change="onChange" autoplay>
          <div>
            <img src="../../assets/img/banner02.png" />
          </div>
          <div>
            <img src="../../assets/img/banner01.png" />
          </div>
          <div>
            <img src="../../assets/img/banner03.png" />
          </div>
        </a-carousel>

        <div style="margin-top: 10px">
          <a-card title="常用模块" :bordered="true">
            <Kanban @GoUrl="GoUrl" :rolVal="1" :key="1" :list="photoINfo" :group="group" :disabled="true"
              header-text="Todo" />
          </a-card>
        </div>

        <div style="margin-top: 10px">
          <a-card title="教务模块" :bordered="true">
            <div v-for="(x, index) in teacherApp" :key="index" :hoverable="false" @click="openDi(x)" class="wodeapp">
              <img :src="x.iconBase64" class="img-wh" />
              <div class="titlehover">{{ x.appName }}{{ x.name }}</div>
            </div>
          </a-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

// import Vue from 'vue'
// import WSchedule from 'wschedule'
// import "wschedule/dist/wschedule.css";
// Vue.use(WSchedule)

import Kanban from "@/components/Kanban";
import HttpHome from "../../api/home";
import HttpWorkPlace from "../../api/workPlace";
import { formateDate } from "../../utils/DateUtils";
import application from "../../api/application";
import moment from "moment";
export default {
  name: "home",
  components: {
    Kanban
  },
  data() {
    /**
   * 获取当天时间
   * @returns {string}
   */
    function getCurDay(num = 0) {
      var datetime = new Date();
      var year = datetime.getFullYear();
      var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
      let day = datetime.getDate()
      if ((day + num) > 0) {
        day = (day + num) < 10 ? "0" + (datetime.getDate() + num) : datetime.getDate() + num;
      } else {
        day = (day - num) < 10 ? "0" + (datetime.getDate() - num) : datetime.getDate() - num;
      }
      return `${year}-${month}-${day}`
    }
    return {
      timePeriodList: [
        {
          timePeriod: '8:00~10:00',
          schedule: [
            {
              isExpend: false,
              [getCurDay()]: [
                {
                  timePeriod: '8:00~10:00',
                  date: getCurDay(),
                  course: '大学英语',
                  watchman: '井底的蜗牛',
                  place: '测试地点',
                  status: 1,
                },
                {
                  timePeriod: '8:00~10:00',
                  date: getCurDay(),
                  course: '大学英语',
                  watchman: '井底的蜗牛',
                  place: '测试地点',
                  status: 2,
                },
                {
                  timePeriod: '8:00~10:00',
                  date: getCurDay(),
                  course: '大学英语',
                  watchman: '井底的蜗牛',
                  place: '测试地点',
                  status: 3,
                },
              ],
            },
            {
              isExpend: false,
              [getCurDay(-1)]: [
                {
                  id: 1,
                  timePeriod: '8:00~10:00',
                  date: getCurDay(-1),
                  course: '大学英语',
                  watchman: '井底的蜗牛',
                  place: '测试地点',
                  status: 1,
                },
              ]
            }
          ]
        },
        {
          timePeriod: '12:00~14:00',
          schedule: [
            {
              isExpend: false,
              [getCurDay()]: [
                {
                  timePeriod: '12:00~14:00',
                  date: getCurDay(),
                  course: '大学英语',
                  watchman: '井底的蜗牛',
                  place: '测试地点',
                  status: 2,
                },
                {
                  timePeriod: '12:00~14:00',
                  date: getCurDay(),
                  course: '大学英语',
                  watchman: '井底的蜗牛',
                  place: '测试地点',
                  status: 3,
                },
              ],
            },
            {
              isExpend: false,
              [getCurDay(-1)]: [
                {
                  timePeriod: '12:00~14:00',
                  date: getCurDay(-1),
                  course: '大学英语',
                  watchman: '井底的蜗牛',
                  place: '测试地点',
                  status: 1,
                },
                {
                  timePeriod: '实验室1',
                  date: getCurDay(-1),
                  course: '大学英语',
                  watchman: '井底的蜗牛',
                  place: '测试地点',
                  status: 1,
                },
                {
                  timePeriod: '实验室1',
                  date: getCurDay(-1),
                  course: '大学英语',
                  watchman: '井底的蜗牛',
                  place: '测试地点',
                  status: 1,
                },
              ]
            }
          ]
        },
        {
          timePeriod: '14:00~16:00',
          schedule: []
        },
      ],
      teacherApp: [
        {
          iconBase64: '',
          appName: '课程表',
          name: ''
        },
        {
          iconBase64: '',
          appName: '课程表',
          name: ''
        }
      ],
      data: [
        {
          id: 1,
          title: "会议管理-新增钉钉应用部门列表到部门列表",
        },
        {
          id: 2,
          title: "我的设置-新增应用关联钉钉",
        },
        {
          id: 3,
          title: "会议管理-新增会议详情",
        },
        {
          id: 4,
          title: "对接钉钉-开启钉钉会议并邀请钉钉通讯录成员",
        },
        {
          id: 5,
          title: "对接钉钉-新增会议统计",
        },
      ],
      photoINfo: [], //我的应用
      allPhotoINfo: [], //我的所有应用
      group: "mission",
      nowTime: new Date().toLocaleString(),
    };
  },
  async beforeMount() {
    let id = localStorage.getItem("loginuserId");
    let param = "%7Bcreate_user_id%3A" + id + "%7D";
    let res2 = await application.getLists(param);

    if (res2.data.errcode == 0) {
      for (let index = 0; index < res2.data.rows.length; index++) {
        if (res2.data.rows[index].adhibition_id == "dingding") {
          localStorage.setItem("dingtalk_appKey", res2.data.rows[index].AppKey);
          localStorage.setItem("dingtalk_AppSecret", res2.data.rows[index].AppSecret);
          localStorage.setItem("dingtalk_user_id", res2.data.rows[index].dingtalk_user_id);
        }

      }
    }
  },
  mounted() {
    this.inntData();
  },
  methods: {
    async inntData() {
      await HttpHome.sortAppList().then((res) => {
        if (res.data.code == 0) {
          const arr = res.data.data.appList;//appFirst
          this.photoINfo = arr;
          this.photoINfo = arr.map((arr) => {
            if (arr.status == 1) {
              return arr;
            }
          });
        } else {
        }
      });
    },
    /**
   * 点击详情
   * @param row
   */
    handleDetail(row) {
      console.log(row)
    },
    /**
     * 点击卡片查看全部内容
     */
    handleCardDetail(row) {
      console.log(row)
    },
    /**
     * 切换周
     * @param date
     */
    changeWeek(date) {
      console.log(date)
    },
    // datesSet(info) {   //注意：该方法在页面初始化时就会触发一次
    //   console.log(info)
    //   // this.search()  //请求本页数据
    //   //虚拟数据
    //   this.calendarOptions.events = [{
    //     id: 111,
    //     title: '任务1',
    //     start: '2021-10-01',
    //     end: '2021 - 10 - 11',
    //     color: '#ffcc99',
    //     editable: true, //允许拖动缩放，不写默认就是false
    //     overlap: true, //允许时间重叠，即可以与其他事件并存，不写默认就是false
    //   }, {
    //     id: 222,
    //     title: '任务2',
    //     start: '2021 - 10 - 12',
    //     end: '2021 - 10 - 20',
    //     color: '#ffcc99',
    //     editable: true, //允许拖动缩放
    //   }]
    // },
    handleEventClick(info) { },
    handleDateClick(info) { },
    calendarEventDropOrResize(info) { },
    openDi() {
      // console.log(window.location.origin);
      window.open(window.location.origin + "/schoolTimetable");
    },
    GoUrl(item) {
      if (item.protocol === "Basic" || item.inducer === "SP") {
        window.open(item.loginUrl);
        return;
      } else if (item.url) {
        this.$router.push({ path: item.url });
      } else {
        window.open(
          process.env.VUE_APP_API_BASE_URL + "/sign/authz/" + item.id
        );
      }
    },
    onChange(a, b, c) {
      // console.log(a, b, c);
    },

    clickalist(val) {
      if (val.id == 1) {
        this.$router.push("/meetings/meetingsList");
      }

      if (val.id == 2) {
        this.$router.push("/components/applicationAssociation");
      }

      if (val.id == 3 || val.id == 4) {
        this.$router.push("/meetings/mList");
      }

      if (val.id == 5) {
        this.$router.push("/meetings/ConferenceStatistics");
      }
    },
    callback(key) {
      // console.log(key);
    },
    getListData(value) {
      let listData;
      switch (value.date()) {
        case 8:
          listData = [
            { type: "warning", content: "待办事宜" },
            { type: "success", content: "已完成开会" },
          ];
          break;
        case 10:
          listData = [
            { type: "warning", content: "本天要视频会议" },
            { type: "success", content: "已经成功完成此功能" },
            { type: "error", content: "报警处理" },
          ];
          break;
        case 15:
          listData = [
            { type: "warning", content: "已过时处理事项" },
            {
              type: "success",
              content: "成功完成",
            },
            { type: "error", content: "报警事项" },
            { type: "error", content: "报警事项" },
            { type: "error", content: "报警事项" },
            { type: "error", content: "报警事项" },
          ];
          break;
        default:
      }
      return listData || [];
    },

    getMonthData(value) {
      if (value.month() === 8) {
        return 1394;
      }
    },
  },
};
</script>


<!-- 教务模块 课程表 样式 -->
<style scoped>
.wodeapp {
  min-width: 25%;
  cursor: pointer;
  align-items: center;
  box-sizing: border-box;
}

.w-things .w-thing-item {
  display: block !important;
  width: 100% !important;
}

.img-wh {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  font-size: 18px;
  margin-top: 60px;
}

.titlehover {
  height: 50px;
  width: 120px;
  margin: 8px auto;
  word-break: break-all;
  text-align: center;
  font-size: 13px;
  color: #4E5969;

}

.titlehover:hover {
  color: #ff4d4f !important;
}
</style>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #000;
}

.grid-content :hover {
  color: #ff4d4f !important;;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 40px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

.schart {
  width: 100%;
  height: 300px;
}

.ant-carousel>>>.slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel>>>.slick-slide h3 {
  color: #fff;
}

.events {
  list-style: none;
  margin: 0;
  padding: 0;
}

.a-list-sty:hover {
  background-color: #ccc;
}

.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}

.notes-month {
  text-align: center;
  font-size: 28px;
}

.notes-month section {
  font-size: 28px;
}

.dolist_center {
  width: 100%;
  height: 200px;
  /* background-color: red; */
}
</style>

<style lang="less" scoped>
.container {
  width: 100%;
  // border: 1px solid #000;
  display: grid;
  // grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 66% minmax(200px, 44%);
  column-gap: 10px;
  row-gap: 30px;
  margin: 0 auto;
  margin-top: 10px;
  color: white;
  font-size: 30px;
}

.mycard {
  background: #fff;
  // border: 1px solid #d9d9d9;
  // border-radius: 4px;
  padding: 11px;
}

.ant-list-bordered {
  margin: -24px !important;
  border: none;
}

.ant-col {
  margin: 3px;
}
</style>
